<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>三菱大看板</title>
	<link rel="stylesheet" href="../css/mitsubishiBoard.css">
	<link rel="stylesheet" href="../lib/swiper/dist/css/swiper.min.css">
</head>
<body>
	<div id="board">
		<header class="board-header">
			<div style="background-color: rgba(0, 214, 255, 0.05)">
				<img src="../images/board/pic-header-3.png" alt="">	
			</div>
			<div class="board-container">
				<div class="flex justify-content-space-between align-items-center">
					<div class="board-header-time flex justify-content-space-between align-items-center"><img src="../images/board/pic-time.png" alt=""><span id="time"></span></div>
					<div class="flex align-items-center">
						<a class="board-header-button" href="javascript:void(0);">返回</a>
						<a class="board-header-button" href="javascript:void(0);">进入系统</a>
					</div>
				</div>
			</div>
		</header>
		<main class="border-main board-container flex">
			<div class="board-col board-col-1 board-corner-col">
				<div class="board-corner-header">
					<span>舆情分析</span>
				</div>
				<div class="board-corner-body">
					<div class="board-chart flex justify-content-center align-items-center" id="generalPublicSentiment">
						<div class="circle-chart-content">
							<div class="circle-chart-box">
								<svg id="personalBadChart" viewBox="0 0 100 100">
									<path class="circle-chart-track" fill="none"></path>
									<path class="circle-chart-path" fill="none" stroke-linecap="round"></path>
								</svg>
								<p class="color-red"></p>
							</div>
							<span>个人舆情负面率</span>
						</div>
						<div class="circle-chart-content">
							<div class="circle-chart-box">
								<svg id="mediaBadChart" viewBox="0 0 100 100">
									<path class="circle-chart-track" fill="none"></path>
									<path class="circle-chart-path" fill="none" stroke-linecap="round"></path>
								</svg>
								<p></p>
							</div>
							<span>媒体舆情负面率</span>
						</div>
					</div>
					<div class="board-chart" id="personalPublicSentiment">
						<h3>个人舆情数</h3>
						<div id="personalPublicSentimentChart">
							<ul class="legend-list flex justify-content-center">
								<li class="legend-item flex align-items-center"><i class="bg-blue"></i>非负面数</li>
								<li class="legend-item flex align-items-center"><i class="bg-red"></i>负面数</li>
							</ul>
							<div class="bar-list flex flex-column justify-content-center align-items-center"></div>
						</div>
					</div>
					<div class="board-chart no-border-bottom" id="mediaPublicSentiment">
						<h3 style="padding-top: 70px;">媒体舆情数</h3>
						<div id="mediaPublicSentimentChart">
							<ul class="legend-list flex justify-content-center">
								<li class="legend-item flex align-items-center"><i class="bg-blue"></i>非负面数</li>
								<li class="legend-item flex align-items-center"><i class="bg-red"></i>负面数</li>
							</ul>
							<div class="bar-list flex flex-column justify-content-center align-items-center"></div>
						</div>
					</div>
				</div>
				<b class="corner corner-top-left"></b>
				<b class="corner corner-top-right"></b>
				<b class="corner corner-bottom-right"></b>
				<b class="corner corner-bottom-left"></b>
			</div>
			<div class="board-col board-col-2">
				<ul class="flex justify-content-space-between" id="infoList">
					<li class="flex flex-column justify-content-center align-items-center info-item red">
						<p>29008</p>
						<div class="flex align-items-center"><img src="../images/board/pic-user.png" alt="">本月个人舆情数</div>
					</li>
					<li class="flex flex-column justify-content-center align-items-center info-item blue">
						<p>4172</p>
						<div class="flex align-items-center"><img src="../images/board/pic-sound.png" alt="">本月媒体舆情数</div>
					</li>
					<li class="flex flex-column justify-content-center align-items-center info-item green">
						<p>3277</p>
						<div class="flex align-items-center"><img src="../images/board/pic-car.png" alt="">认证车主总数</div>
					</li>
				</ul>
				<div id="chinaMap">
					<h2>认证车主分布</h2>
					<div id="chinaChart"></div>
				</div>
				<div id="compareAnalysis" class="board-corner-col">
					<div class="board-corner-header">
						<span>竞品对比分析</span>
					</div>
					<div class="swiper-container" id="compareList"></div>
					<b class="corner corner-top-left"></b>
					<b class="corner corner-top-right"></b>
					<b class="corner corner-bottom-right"></b>
					<b class="corner corner-bottom-left"></b>
				</div>
			</div>
			<div class="board-col board-col-1 board-corner-col">
				<div class="board-corner-header">
					<span>口碑分析</span>
				</div>
				<div class="board-corner-body">
					<div class="board-chart flex justify-content-center align-items-center" id="generalKoubei">
						<div class="analysis-item flex flex-column justify-content-center align-items-center">
							<p class="analysis-value"><span class="analysis-bold">4.55</span></p>
							<div class="analysis-pic pic-flower">
								<img src="../images/board/pic-flower.png" alt="">
							</div>
							<p class="analysis-label">品牌口碑得分</p>
						</div>
						<div class="analysis-item flex flex-column justify-content-center align-items-center">
							<p class="analysis-value"><span class="analysis-bold" id="curRank">21</span><span class="analysis-split">/</span><span id="totalRank">64</span></p>
							<div class="analysis-pic pic-cup">
								<img src="../images/board/pic-cup.png" alt="">
							</div>
							<p class="analysis-label">品牌口碑评分排名</p>
						</div>
					</div>
				</div>
				<div id="seriesKoubei">
					<h3 class="seriesKoubeiMarkTitle">车系口碑评分</h3>
					<div class="split"></div>
					<h3 class="seriesKoubeiScoreTitle">车系分类口碑得分</h3>
					<div class="swiper-container swiper-container-horizontal" id="seriesKoubeiChart"></div>
				</div>
				<b class="corner corner-top-left"></b>
				<b class="corner corner-top-right"></b>
				<b class="corner corner-bottom-right"></b>
				<b class="corner corner-bottom-left"></b>
			</div>
		</main>
	</div>
</body>
<script type="text/javascript" src="../lib/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="../lib/echarts/dist/echarts.min.js"></script>
<script type="text/javascript" src="../lib/echarts/map/js/china.js"></script>
<script type="text/javascript" src="../lib/swiper/dist/js/swiper.min.js"></script>
<script type="text/javascript" src="../script/mitsubishiBoard.js"></script>
</html>